<template>
  <div>
    <p>firstName: {{ firstName }}</p>
    <p>lastName: {{ lastName }}</p>
    <p>fullName: {{ fullName }}</p>
  </div>
</template>

<script>
import { computed, reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      firstName: '吕',
      lastName: '布',
    })

    // computed 接收一个函数，返回值就是新数据
    state.fullName = computed(() => {
      return state.firstName + '~' + state.lastName
    })

    return {
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped></style>
